<template>
    <view class="patriarch_card">
        <view class="info" @click="handlePrefectInfo">
            <image :src="patriarch_header_1" mode="" class="header"></image>
            <text class="name">家长昵称</text>
            <text class="identity">家长</text>
        </view>
        <view class="function">
            <template v-for="i in list" :key="i.title">
                <view v-if="i.show" class="function_item" @click="handleJump(i)">
                    <view class="photo_box">
                        <image :src="i.photo" mode="" class="photo"></image>
                        <text v-if="i.title === '绑定申请' && showUnRead" class="unread"></text>
                    </view>
                    <text class="title">{{ i.title }}</text>
                </view>
            </template>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const patriarch_header_1 = `${OSS_URL}/patriarch_header_1.png`;
const patriarch_header_2 = `${OSS_URL}/patriarch_header_2.png`;
const showUnRead = ref(true);
const list = ref([
    {
        title: '扫码绑定',
        photo: `${OSS_URL}/urm/my_scan_binding.png`,
        show: true,
        url: '',
    },
    {
        title: '绑定申请',
        photo: `${OSS_URL}/urm/my_binding_apply.png`,
        show: true,
        url: '/pages/mine/bindApply/index',
    },
    {
        title: '电子保修卡',
        photo: `${OSS_URL}/urm/my_warranty.png`,
        show: true,
        url: '/pages/mine/warranty/index',
    },
    {
        title: '使用攻略',
        photo: `${OSS_URL}/urm/my_use_guideline.png`,
        show: true,
        url: '',
    },
    {
        title: '任务管理',
        photo: `${OSS_URL}/urm/my_task_manage.png`,
        show: true,
        url: '/pages/mine/taskManage/index',
    },
    {
        title: '奖励管理',
        photo: `${OSS_URL}/urm/my_award_manage.png`,
        show: true,
        url: '/pages/mine/awardManage/index',
    },
]);
function handleJump(i: AnyObject) {
    uni.navigateTo({
        url: i.url,
    });
}
// 完善信息
function handlePrefectInfo() {
    uni.navigateTo({
        url: '/pages/mine/prefectInformation/index',
    });
}
</script>

<style lang="scss" scoped>
.patriarch_card {
    padding: 30rpx;
    background-color: #fff;
    border-radius: 20rpx;

    .info {
        display: flex;
        align-items: center;

        .header {
            width: 100rpx;
            height: 100rpx;
        }

        .name {
            display: inline-block;
            margin: 0 10rpx 0 20rpx;
            font-weight: 500;
            font-size: 32rpx;
            line-height: 48rpx;
            color: rgba(51, 51, 51, 1);
        }

        .identity {
            display: inline-block;
            padding: 0 10rpx 0 10rpx;
            background-color: rgba(93, 185, 255, 1);
            border-radius: 6rpx;
            font-size: 22rpx;
            line-height: 30rpx;
            color: #fff;
        }
    }

    .function {
        padding: 0 5rpx;
        display: flex;
        flex-wrap: wrap;

        .function_item {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 30rpx 28rpx 0 0;
            width: 130rpx;

            &:nth-child(4n) {
                margin-right: 0;
            }

            .photo_box {
                position: relative;
                display: block;
                width: 80rpx;
                height: 80rpx;

                .photo {
                    width: 80rpx;
                    height: 80rpx;
                }

                .unread {
                    display: block;
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 16rpx;
                    height: 16rpx;
                    background-color: rgba(255, 40, 40, 1);
                    border-radius: 50%;
                }
            }

            .title {
                display: block;
                margin-top: 20rpx;
                font-weight: 400;
                font-size: 26rpx;
                color: rgba(102, 102, 102, 1);
                line-height: 36rpx;
            }
        }
    }
}
</style>
